<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>制定采购计划</title>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/themes/default/easyui.css"/>">
<link rel="stylesheet" type="text/css" href="<c:url value="/css/themes/icon.css"/>">
<script type="text/javascript" src="<c:url value="/js/jquery.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery.easyui.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/easyui-lang-zh_CN.js"/>"></script>

<style type="text/css">
	*{
		font-size: 12px;
	}
</style>



</head>
<body>

<script type="text/javascript">
	var editIndex = undefined;
	//结束正在编辑的行
	function endEditing(){
		if (editIndex == undefined){return true}
		if ($('#dg').datagrid('validateRow', editIndex)){
			$('#dg').datagrid('endEdit', editIndex);
			editIndex = undefined;
			return true;
		} else {
			return false;
		}
	}
	//事件：单击单元格的事件
	function onClickCell(index, field){
		if (editIndex != index){
			if (endEditing()){
				$('#dg').datagrid('selectRow', index)
						.datagrid('beginEdit', index);
				var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
				if (ed){
					($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
				}
				editIndex = index;
			} else {
				setTimeout(function(){
					$('#dg').datagrid('selectRow', editIndex);
				},0);
			}
		}
	}
	
	//结束编辑，同步数据
	function onEndEdit(index, row){
		var ed = $(this).datagrid('getEditor', {
			index: index,
			field: 'details.planDetailUnit'
		});
		row['details.planDetailUnit'] = $(ed.target).combobox('getText');
	}
	
	//添加行
	function append(){
		if (endEditing()){
			$('#dg').datagrid('appendRow',{'details.planDetailName': [], 'details.planDetailGuige': [],'details.planDetailUnit': [],'details.planDetailCount': [],'details.planDetailProvider': [],'details.planDetailMoney': []});
			editIndex = $('#dg').datagrid('getRows').length-1;
			$('#dg').datagrid('selectRow', editIndex)
					.datagrid('beginEdit', editIndex);
		}
	}
	
	//删除行
	function removeit(){
		if (editIndex == undefined){return}
		$('#dg').datagrid('cancelEdit', editIndex)
				.datagrid('deleteRow', editIndex);
		editIndex = undefined;
	}
	
	//应用
	function accept(){
		if (endEditing()){
			//$('#dg').datagrid('acceptChanges');
			endEditing();
		}
	}
	
	//撤消
	function reject(){
		$('#dg').datagrid('rejectChanges');
		editIndex = undefined;
	}
	
	//获取数据
	function getChanges(){
		var rows = $('#dg').datagrid('getChanges');
		alert(rows.length+' rows are changed!');
	}
	
	//提交采购计划
	function savePlan(){
		//将datagrid中的数据行保存到隐式表单域中
		//1、获取新增的数据行
		var rows = $('#dg').datagrid('getChanges');
		console.log(JSON.stringify(rows));
		
		//为每一行生成对应的隐藏表单域
		
		for(var i = 0; i < rows.length; i ++){
			generateHidden(rows[i], "Name", i);
			generateHidden(rows[i], "Guige", i);
			generateHidden(rows[i], "Unit", i);
			generateHidden(rows[i], "Count", i);
			generateHidden(rows[i], "Provider", i);
			generateHidden(rows[i], "Money", i);
		}
		
		var ff_plan = $("#ff_plan");
		//提交表单
		ff_plan.form("submit", {
			success: function(v){
				$.messager.alert('提示', "提交成功");
				$(":hidden[x='y']").remove();
			}
		});
	}
	
	function generateHidden(row, name, i){
		//details.planDetail
		var ff_plan = $("#ff_plan");
		$("<input type='hidden' x='y'>")
			.attr("name", "details[" + i + ']' + '.planDetail' + name)
			.val(row['details.planDetail' + name])
			.appendTo(ff_plan);
	}
</script>


	<form id="ff_plan" action="do_plan" method="post">
		<table width="100%" style="background: rgb(236,243,255); padding: 10px; border-radius: 5px;">
			<tr>
				<td width="50%">
					<input class="easyui-textbox" name="plan.planTitle"
						data-options="label:'项目名称', width:'80%'"/> 
				</td>
				<td width="50%">
					<select class="easyui-combogrid" name="plan.emp2.empno"
						data-options="
							label:'制定人', 
							width:'60%', 
							panelWidth: '250',
							url:'queryEmpsByPage',
							queryParams: {page:1, rows:100},
							idField: 'empno',
							textField: 'ename',
							columns:[[
				                {field:'ename',title:'姓名',width:60},
				                {field:'dename',title:'部门',width:120},
				                {field:'job',title:'职务',width:60}
				            ]]
							"></select>
				</td>
			</tr>
			<tr>
				<td>
					<select class="easyui-combogrid" name="plan.emp1.empno"
						data-options="
							label:'审批人', 
							width:'60%', 
							panelWidth: '250',
							url:'queryEmpsByPage',
							queryParams: {page:1, rows:100},
							idField: 'empno',
							textField: 'ename',
							columns:[[
				                {field:'ename',title:'姓名',width:60},
				                {field:'dename',title:'部门',width:120},
				                {field:'job',title:'职务',width:60}
				            ]]
							"></select>
				</td>
				<td>
					<input class="easyui-datebox" name="plan.planBackTime"
						data-options="label:'预计到货日期', width:'60%'">
				</td>
			</tr>
		</table>
		
		<div style="margin: 5px;">
			<div id="tt" class="easyui-tabs" style="width:100%; margin-top: 10px;"
				data-options="plain:true,narrow:true">
				<div title="采购计划明细" style="padding:10px">
					<table id="dg" class="easyui-datagrid"style="height:auto"
							data-options="
								iconCls: 'icon-edit',
								singleSelect: true,
								toolbar: '#tb',
								method: 'get',
								onClickCell: onClickCell,
								onEndEdit: onEndEdit,
								width: '100%'
							">
						<thead>
							<tr>
								<th data-options="field:'details.planDetailName',width:'20%',editor:'textbox'">药物名称</th>
								<th data-options="field:'details.planDetailGuige',width:'10%',editor:'textbox'">规格</th>
								<th data-options="field:'details.planDetailUnit',width:'10%',editor:{
										type:'combobox',
										options:{
											valueField:'label',
											textField:'value',
											panelHeight: 'auto',
											data: [{label:'箱',value:'箱'},{label:'盒',value:'盒'}]
										}
									}">单位</th>
								<th data-options="field:'details.planDetailCount',width:'10%',editor:{type:'numberbox',options:{precision:2}}">数量</th>
								<th data-options="field:'details.planDetailProvider',width:'40%',editor:'textbox'">供应商</th>
								<th data-options="field:'details.planDetailMoney',width:'10%',align:'center',editor:'textbox'">预计金额</th>
							</tr>
						</thead>
					</table>
					
					<div id="tb" style="height:auto">
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">添加一行</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">移除一行</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true" onclick="accept()">应用</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤销</a>
					</div>
				</div>
			</div>
			
			<div style="margin-top: 10px;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok', onClick: savePlan">提交采购计划</a>
			</div>
		</div>
	</form>
</body>
</html>